<template>
  <div class="home_box">
    <!-- 顶部导航 -->
    <header class="header_box" :class="{ active: !isTop }">
      <div class="left_box">
        <van-icon
          name="wap-nav"
          style="display: inline-block; margin: 0.3rem 0 0 0.3rem"
          @click="toCaregary"
          :color="topColor"
          size=".6rem"
        />
      </div>
      <div class="middle_box">
        <span class="app_name"> 新峰商城</span>
        <span class="AD">山河无恙，人间皆安</span>
      </div>
      <div class="right_box">
        <van-icon
          name="contact"
          style="display: inline-block; margin: 0.3rem 0 0 0.3rem"
          @click="toUser"
          :color="topColor"
          size=".6rem"
        />
      </div>
    </header>
    <!-- 顶部导航 结束-->

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in carousels" :key="item.id">
        <img :src="item.carouselUrl" alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- 轮播图 -->

    <!-- 十个小图标 -->
    <van-grid :column-num="5" icon-size="1rem" :border="false">
      <van-grid-item
        v-for="(item, index) in vanGridData"
        :key="index"
        :icon="item.url"
        :text="item.desc"
      />
    </van-grid>
    <!-- 十个小图标 -->
    <main>
      <!-- 新品上线 -->
      <section class="new_goods">
        <p class="new_goods_title">新品上线</p>
        <van-grid :column-num="2">
          <van-grid-item v-for="item in newGoodses" :key="item.goodsId">
            <router-link :to="'/Info/'+item.goodsId">
              <img :src="item.goodsCoverImg" alt="" class="goods_img" />
            <div class="goods_desc">
              <p class="desc">{{ item.goodsName }}</p>
              <span class="price">￥{{ item.sellingPrice }}</span>
            </div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </section>
      <!-- 新品上线 -->
      <!-- 热门商品 -->
      <section class="new_goods">
        <p class="new_goods_title">热门商品</p>
        <van-grid :column-num="2">
         
          <van-grid-item v-for="item in hotGoodses" :key="item.goodsId">
            <router-link :to="'/Info/'+item.goodsId">
            <img :src="item.goodsCoverImg" alt="" class="goods_img" />
            <div class="goods_desc">
              <p class="desc">{{ item.goodsName }}</p>
              <span class="price">￥{{ item.sellingPrice }}</span>
            </div>
            </router-link>
          </van-grid-item>
        </van-grid>
      </section>
      <!-- 热门商品 -->
      <!-- 最新推荐 -->
      <section class="new_goods">
        <p class="new_goods_title">最新推荐</p>
        <van-grid :column-num="2">
          <van-grid-item v-for="item in recommendGoodses" :key="item.goodsId">
            <router-link :to="'/Info/'+item.goodsId">
            <img :src="item.goodsCoverImg" alt="" class="goods_img" />
            <div class="goods_desc">
              <p class="desc">{{ item.goodsName }}</p>
              <span class="price">￥{{ item.sellingPrice }}</span>
            </div>
          </router-link>
          </van-grid-item>
        </van-grid>
      </section>
      <!-- 最新推荐 -->
    </main>
  </div>
</template>

<script>
import { getIndexInfo } from "../../api/index";
export default {
  name: "Home",
  data() {
    return {
      isTop: true,
      topColor: "#1BAEAE",
      carousels: [], // 轮播图数据
      hotGoodses: [], //热销商品的数据
      newGoodses: [], // 新品数据
      recommendGoodses: [], // 推荐 数据
      vanGridData: [
        {
          url: "http://s.weituibao.com/1583585285461/cs.png",
          desc: "新峰超市",
        },
        {
          url: "http://s.weituibao.com/1583585285468/fs.png",
          desc: "新峰服饰",
        },
        {
          url: "http://s.weituibao.com/1583585285470/qq.png",
          desc: "全球购",
        },
        {
          url: "http://s.weituibao.com/1583585285472/sx.png",
          desc: "新峰生鲜",
        },
        {
          url: "http://s.weituibao.com/1583585285467/dj.png",
          desc: "新峰到家",
        },
        {
          url: "http://s.weituibao.com/1583585285465/cz.png",
          desc: "充值",
        },
        {
          url: "http://s.weituibao.com/1583585285469/pt.png",
          desc: "9.9元拼",
        },
        {
          url: "http://s.weituibao.com/1583585285468/juan.png",
          desc: "领券 ",
        },
        {
          url: "http://s.weituibao.com/1583585285471/sq.png",
          desc: "省钱 ",
        },
        {
          url: "http://s.weituibao.com/1583585285470/qb.png",
          desc: "全部",
        },
      ],
    };
  },
  methods: {
    //顶部导航样式
    changeTop() {
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t > 50) {
        this.isTop = false;
        this.topColor = "white";
      } else {
        this.isTop = true;
        this.topColor = "#1BAEAE";
      }
    },
    //获取页面数据
    getData() {
      getIndexInfo().then((data) => {
        this.carousels = data.data.carousels;
        this.hotGoodses = data.data.hotGoodses;
        this.newGoodses = data.data.newGoodses;
        this.recommendGoodses = data.data.recommendGoodses;
      });
    },
    //跳转到分类页面
    toCaregary() {
      this.$router.push("/Categary");
    },
    //跳转到User页面
    toUser() {
      this.$router.push("/User");
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    window.addEventListener("scroll", this.changeTop);
  },
  beforeDestroy() {
    window.addEventListener("scroll", this.changeTop);
  },
};
</script>

<style scoped lang="less">
.home_box {
  .header_box {
    position: fixed;
    width: 100%;
    height: 50px;
    display: flex;
    z-index: 200;
    top: 0;
    left: 0;
    .left_box {
      width: 50px;
      flex: none;
      // background: rgba(0, 0, 0, 0.2);
      align-items: center;
    }
    .right_box {
      width: 50px;
      flex: none;
      // background: rgba(0, 0, 0, 0.2);
    }
    .middle_box {
      display: flex;
      flex: 1;
      height: 0.53333rem;
      margin: 0.26667rem 0.3rem;
      padding: 0.13333rem;
      color: #232326;
      background: hsla(0, 0%, 100%, 0.7);
      border-radius: 0.53333rem;
      .app_name {
        flex: 1;
        display: inline-block;
        padding: 0 0.4rem 0 0.04rem;
        font-size: 0.5rem;
        color: #1baeae;
        text-align: center;
        border-right: 0.01rem solid black;
        line-height: 0.6rem;
        font-weight: 700;
      }
      .AD {
        flex: 2;
        text-align: center;
        display: inline-block;
        font-size: 0.3rem;
        color: #666;
        line-height: 0.6rem;
      }
    }
    &.active {
      background: #1baeae;
      .left_box,
      .right_box {
        color: white;
      }
    }
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img {
      width: 100%;
      height: auto;
    }
  }
  .new_goods_title {
    background: #f9f9f9;
    height: 1.33333rem;
    line-height: 1.33333rem;
    text-align: center;
    color: #1baeae;
    font-size: 0.42667rem;
    font-weight: 500;
  }
  .goods_img {
    display: block;
    width: 3.2rem;
    margin: 0 auto;
  }
  .goods_desc {
    text-align: center;
    font-size: 0.37333rem;
    padding: 0.26667rem 0;
    .desc{
      color: #000;
    }
  }
  .price {
    color: #1baeae;
  }
}
</style>